<template>
    <div>
        <!-- 这是折线图模块 -->
        <div id="line_wrap" style="width:100%;height:310px"></div>
    </div>
</template>

<script>
export default {
    props: {
        title: {},
        dateObj: {},
        lineData: {
            type: Array
        },
        webNumArr: [],//前端折线图数据
        javaNumArr: [],//后端折线图数据
        shejiNumArr: []//视觉设计折线图数据
    },
    mounted() {
        // console.log(111)
        this.initBar()
    },
    watch: {
        dateObj() {
            this.initBar()
        },
        webNumArr(){
            this.initBar()
        },
        javaNumArr(){
            this.initBar()
        },
        shejiNumArr(){
            this.initBar()
        }
    },
    methods: {
        initBar() {
            console.log(this.$echarts)
            // 基于准备好的dom，初始化echarts实例
            var myChart = this.$echarts.init(document.getElementById('line_wrap'));
            //设置配置项
            var option = {
                title: {
                    text: '专业每日新增数',
                    textStyle: {
                        color: '#fff'
                    }
                },
                textStyle: {
                    color: '#fff',
                    fontWeight: 'bolder'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['前端', '后端', '视觉设计']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: Array.from(this.dateObj)
                },
                yAxis: {
                    type: 'value',
                },
                series: [
                    {
                        name: '前端',
                        type: 'line',
                        stack: 'Total',
                        data: this.webNumArr
                    },
                    {
                        name: '后端',
                        type: 'line',
                        stack: 'Total',
                        data: this.javaNumArr
                    },
                    {
                        name: '视觉设计',
                        type: 'line',
                        stack: 'Total',
                        data: this.shejiNumArr
                    }
                ]
            }
            // 绘制图表
            myChart.setOption(option);
        }
    }
}
</script>

<style lang="less" scoped></style>